<template>
  <div class="page_tag_mgr">
    <div class="title__1">
      <el-button type="success" size="mini" plain @click.stop="goAddTag">添加标签</el-button>
      <el-input
        v-model="tagTable.searchName"
        size="mini"
        clearable
        style="width: 180px"
        placeholder="模糊查询标签名称"
        prefix-icon="el-icon-search"></el-input>
      <el-button v-if="tagTable.dataListLoading" size="mini" type="primary" disabled icon="el-icon-loading">
        搜索标签
      </el-button>
      <el-button v-else size="mini" type="primary" @click.stop="searchTagByName">搜索标签</el-button>
      <div>
        <el-radio-group v-model="tagFilter" style="display: flex; align-items: center" @change="searchTagByName">
          <el-radio :label="1" style="margin: 0px 5px 0px 5px">全部</el-radio>
          <el-radio :label="2">自建</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="content__1">
      <el-table v-loading="tagTable.dataListLoading" :data="tagTable.dataList" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
        <el-table-column prop="code" label="分类编号" width="80" align="center"></el-table-column>
        <el-table-column prop="name" label="标签编码(唯一)" width="120" align="center"></el-table-column>
        <el-table-column prop="tag" label="标签名称" width="220" align="center"></el-table-column>
        <el-table-column prop="tagDesc" label="标签描述" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column fixed="right" align="center" width="200">
          <template slot="header">
            <span style="margin: 0 0">操作</span>
          </template>
          <template slot-scope="scope">
            <div v-if="scope.row.code >= minCustomizeCode">
              <el-button type="warning" size="mini" plain @click.stop="goTagEdit(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" plain @click.stop="goTagDelete(scope.row)">删除</el-button>
            </div>
            <div v-else>
              <el-button type="success" size="mini" plain @click.stop="goTagView(scope.row)">查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="tagTable.total > 0"
        :total="tagTable.total"
        :page.sync="tagTable.pageParam.page"
        :limit.sync="tagTable.pageParam.limit"
        @pagination="loadTagList"></pagination>
    </div>
    <!--添加&修改-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form :ref="tagTable.formName" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="分类编号" prop="name">
          <el-input v-model="form.code" :maxlength="10" clearable show-word-limit :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="标签编号">
          <el-input
            v-model="form.name"
            :maxlength="10"
            clearable
            show-word-limit
            :disabled="tagMgrMode.now != tagMgrMode.add"></el-input>
        </el-form-item>
        <el-form-item label="标签名称" prop="tag">
          <el-input
            v-model="form.tag"
            :maxlength="16"
            clearable
            show-word-limit
            :disabled="tagMgrMode.now != tagMgrMode.add"></el-input>
        </el-form-item>
        <el-form-item label="标签描述" prop="tagDesc">
          <el-input
            v-model="form.tagDesc"
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 6 }"
            placeholder="请输入标签描述"
            :disabled="tagMgrMode.now == tagMgrMode.view"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hideDialog">取 消</el-button>
        <el-button v-if="dialogCommiting" type="primary" icon="el-icon-loading" disabled>确 定</el-button>
        <el-button v-else type="primary" @click="confirmTag">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
import * as tagApi from '@/api/tags';
import Pagination from '@/components/Pagination';
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

export default {
  name: 'TagMgr',
  components: { Pagination },
  data() {
    return {
      minCustomizeCode: 10000,
      tagFilter: 1,
      tagMgrMode: { now: 1, view: 1, edit: 2, add: 3 },
      tagTable: {
        // 筛选的顾客列表
        dataList: [],
        dataListLoading: false,
        total: 0,
        pageParam: { page: 1, limit: 10 },
        searchName: '',
        formName: 'refTagForm',
      },
      form: {
        id: '',
        code: '',
        name: '',
        tag: '',
        tagDesc: '',
      },
      rules: {
        name: [{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }],
        tag: [
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' },
        ],
      },
      dialogTitle: '',
      dialogVisible: false,
      dialogCommiting: false,
    };
  },
  computed: {
    ...mapGetters(['name', 'id', 'deptId', 'openId']),
  },
  mounted() {
    this.loadTagList();
  },
  methods: {
    loadTagList: async function (page, name) {
      if (this.tagTable.dataListLoading) {
        return;
      }
      this.tagTable.dataListLoading = true;
      const errAlertMsg = '查询标签列表失败';
      const params = { id: this.id, filter: this.tagFilter };
      params.name = !name ? null : name;
      params.pageNumber = this.tagTable.pageParam.page;
      params.pageSize = this.tagTable.pageParam.limit;
      await tagApi
        .getPage(params)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            MessageBox.alert(errAlertMsg);
            return;
          }
          if (res.data.data && res.data.data.records) {
            this.tagTable.dataList = res.data.data.records;
            this.tagTable.total = res.data.data.total;
          }
        })
        .catch(e => {
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.tagTable.dataListLoading = false;
        });
    },
    searchTagByName: async function () {
      const k = this.tagTable.searchName.trim();
      await this.loadTagList({ page: this.tagTable.pageParam.page, limit: this.tagTable.pageParam.limit }, k);
    },
    resetForm(formName) {
      const targetForm = this.$refs[formName];
      if (targetForm) {
        targetForm.resetFields();
      }
    },
    hideDialog: async function (row) {
      this.dialogVisible = false;
      this.resetForm(this.tagTable.formName);
    },
    goAddTag: async function (row) {
      this.resetForm(this.tagTable.formName);
      this.form.code = this.minCustomizeCode;
      this.dialogTitle = '添加标签';
      this.tagMgrMode.now = this.tagMgrMode.add;
      this.dialogVisible = true;
    },
    goTagView: async function (row) {
      this.dialogTitle = '查看标签';
      this.tagMgrMode.now = this.tagMgrMode.view;
      this.form = Object.assign({}, row);
      this.dialogVisible = true;
    },
    goTagEdit: async function (row) {
      this.dialogTitle = '修改标签';
      this.tagMgrMode.now = this.tagMgrMode.edit;
      this.form = Object.assign({}, row);
      this.dialogVisible = true;
    },
    goTagDelete: async function (row) {
      const errAlertMsg = '删除标签失败';
      await tagApi
        .del(row.id)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            MessageBox.alert(errAlertMsg);
            return;
          }
          this.loadTagList();
        })
        .catch(err => {
          console.log('goTagDelete', err);
          MessageBox.alert(errAlertMsg);
        });
    },
    confirmTag: async function () {
      if (this.dialogCommiting) {
        return;
      }
      let commit = false;
      this.$refs[this.tagTable.formName].validate(valid => {
        commit = valid;
      });
      if (!commit) {
        MessageBox.alert('请检查数据是否符合要求');
        return;
      }
      this.dialogCommiting = true;
      const errAlertMsg = this.tagMgrMode.now == this.tagMgrMode.add ? '添加标签失败' : '修改标签失败';
      const applyFunc = this.tagMgrMode.now == this.tagMgrMode.add ? tagApi.add : tagApi.update;
      await applyFunc(this.form)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            MessageBox.alert(errAlertMsg);
            return;
          }
          this.hideDialog();
          this.loadTagList();
        })
        .catch(err => {
          console.log('confirmTag', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.dialogCommiting = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
$page_font_family: 思源黑体 微软雅黑 Noto Sans SC-Medium;
$title-label-size: 0.27333rem;

.page_tag_mgr {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #f8f8fa;
  padding: 5px 10px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;

  .title__1 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }

  .content__1 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }
}
</style>
